<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box::before {
        content: "hello";
        color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div style="color: red; border: solid; font-size: 30px">hello jack</div>
    <div id="box">hello jack</div>
    <script>
      /*
        1. （计算）层叠样式 标签样式+文件样式+内联样式+默认样式
        2. 计算样式只能读取，不能设置，读取语法和style一致
      */
      const box = document.getElementById("box");
      console.log(box.style.color); //不准确

      // 返回一个样式对象，结构和box.styley一直
      const style = getComputedStyle(box);
      console.log(style.color);
      console.log(style.fontSize);

      // 伪元素样式获取
      const wstyle = getComputedStyle(box, "::before");
      console.log(wstyle.color);
      console.log(wstyle.fontSize);
    </script>
  </body>
</html>
